.dashboard-page {

	background: linear-gradient(180deg, #5fdbdf, #abffe2);
	background-size: cover;
	padding-top: 80px;
	background-size: 100% 100%;
	min-height: 100vh;

	.strong {
		font-weight: bold;
	}

	.dashboard-sidebar {

		.user-quizzes {
			//padding: 20px;
		}

		.user-quiz {
			background-color: white;
			border: 5px solid #212121;
			//border-radius: 5px;
			box-shadow: 5px 5px 3px;
			padding: 15px;
			margin: 20px;
			cursor: pointer;
		}

		.user-quiz:hover {
			background-color: #dddddd;
			box-shadow: none;
		}

	}

	/* NEW DASHBOARD LANDING STYLES */
		.button-container {
			display: flex;
			flex-direction: row;
			justify-content: center;
			border-bottom: 3px solid white;			
			
			.create-button {
				cursor: pointer;
				height: 250px;
				width: 250px;
				border: 4px solid white;
				border-radius: 50%;
				margin: 50px;
				text-transform: uppercase;
				display: flex;
				flex-direction: column;
				justify-content: center;
				text-align: center;
				font-size: 2.0em;
			}

			.settings-button {
				margin: auto 50px;
				height: 100px;
				width: 100px;
			}	
		}

		.activity-container {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			text-align: center;

			.activity-title {
				text-transform: uppercase;
				font-size: 2.5em;
				border-bottom: 2px solid #212121;
			}

			.activity-item {
				border-bottom: 2px solid #212121;
				width: 80%;
				margin: 0 auto;

				.right {
					float: right;
				}

				.left {
					float: left;
					clear: both;
				}

				.clear {
					clear: both;
				}

				.item-inner {
					width: 50%;
					padding: 20px;
					text-align: left;
					display: block;
					margin: 0 auto;
				}

				.currently-active, .people-taking {
					padding: 15px 0;
				}
			}
		}

		.menu-container {
			margin: 0 auto;
			display: block;
			display: flex;
			flex-direction: row;
			justify-content: center;
			border-bottom: 2px solid black;
		
			.menu-item {
				font-size: 2.3em;
				padding: 14px;
				border: 2px solid white;
				border-radius: 50%;
				margin: 20px 40px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				text-align: center;

				span {
					//font-size: 2.0em;
				}
			}
		}

		.settings-container {

			.settings-title {
				text-align: center;
				border-bottom: 2px solid black;
				text-transform: uppercase;
				padding-bottom: 5px;
			}

			.info-row {
				position: relative;

				.profile-picture {
					border: 1px solid black;
					padding: 10px;
					text-align: center;
					height: 200px;
				}

				.account-info-1 {

				}

				.account-info-2 {

				}

				.edit-icon {
					font-size: 1.5em;
					position: absolute;
					right: 30px;
					top: 0;
					border: 2px solid black;
					border-radius: 50%;
					padding: 6px 9px;

				}
			}

			.password-row {
				border-top: 1px solid #212121;
				padding-top: 20px;
			}

			.password-input {
				padding: 10px 20px;
				border: 1px solid #212121;
			}
		}

		// DASHBOARD REVIEW QUIZ

		.review-title {
			text-transform: uppercase;
			text-align: center;
			border-bottom: 2px solid black;
			padding: 20px 0;
			margin: 0;
		}

		.sidebar-section {
			height: 100%;
			border-right: 2px solid black;
			padding: 15px;

			.sidebar-quiz {
				border: 2px solid black;
				margin: 10px;
				padding: 10px;

				p {
					margin: 0;
					padding:  10px 0;
				}
			}

			.sidebar-quiz:hover {
				border: 2px solid white;

				p:nth-child(1) {
					border-bottom: 2px solid white;
				}
			}

			.sidebar-quiz p:nth-child(1) {
				border-bottom: 2px solid black;
			}

			.sidebar-quiz.active-state {
				border: 2px solid white;

				p:nth-child(1) {
					border-bottom: 2px solid white;
				}
			}

		}

		.review-quiz-section {
			min-height: 50px;

			ul {
				list-style: none;
			}

			li {
				list-style: none;
			}

			.top-row {
				position: relative;
				border-bottom: 2px solid black;

				.launch-button {
					float: left;
					margin: 10px;
					padding: 10px 50px;
					background-color: #212121;
					color: #fff;
					max-width: 250px;
					text-align: center;

					.caret {
						margin-left: 20px;
						margin-right: 0;
					}
				}

				.dropdown-menu {

					li {
						border-bottom: 1px solid #555555;
					}

					li:last-child {
						border-bottom: none;
					}
				}


				.edit-icon {
					font-size: 1.5em;
					position: absolute;
					right: 30px;
					top: 10px;
					border: 2px solid black;
					border-radius: 50%;
					padding: 6px 9px;

				}

				.filler {
					height: 65px;
					width: 1px;
				}
			}
		}

		.edit-quiz-section {
			min-height: 50px;

			.edit-quiz-name, .edit-question-input, .edit-answer-input {
				background-color: transparent;
				border: none;
				border-bottom: 2px solid black;
			}

			.edit-quiz-name .focus, .edit-question-input .focus, .edit-answer-input .focus {
				border: none;
			}

			.top-row {
				position: relative;
				border-bottom: 2px solid black;

				.launch-button {
					float: left;
					margin: 10px;
					padding: 10px 50px;
					background-color: #212121;
					color: #fff;
					max-width: 250px;
					text-align: center;
				}

				.edit-icon {
					font-size: 1.5em;
					position: absolute;
					right: 30px;
					top: 10px;
					border: 2px solid black;
					border-radius: 50%;
					padding: 6px 9px;

				}

				.edit-quiz-controller-box {
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					padding: 10px 30px 10px 0;

					.edit-text {
						margin: auto 10px;
						text-transform: uppercase;
					}

					.edit-icon {
						position: static;
						margin: 0 10px;
					}
				}

				.filler {
					height: 65px;
					width: 1px;
				}
			}
		}

		.quiz-generator {

			.title-section {
				text-align: center;

				.quiz-name {
					width: 50%;
					margin: 20px auto;
					text-align: center;
				}

				.quiz-question-time {
					width: 25%;
					margin: 5px auto 20px auto;
					text-align: center;
				}

				.upload-image-container {
					//text-align: left;
					border-bottom: 2px solid #212121;
				}

				.float-left {
					float: left;
					text-align: left;
				
					.upload-image-link {
						margin-top: 5px;
					}
				}

				.float-right {
					float: right;
					text-align: right;
					
					.set-competition-checkbox {
						margin: 8px 5px 0 0;
					}

					.set-competition-label {
						margin-top: 5px;
					}

					.require-login-checkbox {
						margin: 8px 5px 0 0;
					}

					.require-login-label {
						margin-top: 5px;
					}

				}

				.clearfix {
					clear: both;
					overflow: auto;
				}
			}

			.question-row {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding: 20px;

				.question-options {
					width: 20%;
					font-size: 14px;
					line-height: 20px;

					.question-time {
						width: 60%;
						margin: 10px auto;
					}

					.settings-checkbox {
						height: 14px;
						line-height: 20px;
						padding-top: 10px;
					}

				}

				.question-content {
					width: 37%;

				}

				.question-answers {
					width: 37%;

					.divider-line {
						width: 10px;
							//border-right: 1px solid #337AB7;
							//margin: 0 5px;
						}

					.answer-input {
						margin-bottom: 10px;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;

						.answer-checkbox {
							height: 25px;
							width: 30px;
							background-color: white;
						}

						.answer-radio {
							height: 25px;
							width: 30px;
						}
					
						.correct-answer-choice {
							height: 34px;
							width: 34px;
							background-color: white;
							border: 1px solid #ccc;
							border-radius: 4px;
							margin-right: 10px;
						}
					}
				}
			}

			.button-row {

				.launch-button {
					width: 200px;
				}
			}
		}

		.qr-code-modal {
			display: flex;
			flex-direction: column;
			justify-content: center;
			text-align: center;
			width: 35%;
			height: 80%;
			margin: 0 auto;
			top: 10%;
			display: none;

			.modal-content {
				height: 100%;
				margin: auto;
			}

			.modal-body {
				height: 80%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				padding: 0 50px;

				.settings-option {
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					.select-login-option {
						width: auto;
					}
				}
			}

			.quiz-qr-code {
				margin: auto;
			}
		}
	// LAUNCH BUTTON CSS

	.onoffswitch {
	    position: relative; width: 90px;
	    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
	}

	.onoffswitch-time {
		width: auto;
	}

	.onoffswitch-checkbox {
	    display: none;
	}
	.onoffswitch-label {
	    display: block; overflow: hidden; cursor: pointer;
	    border: 2px solid #999999; border-radius: 20px;
	}
	.onoffswitch-inner {
	    display: block; width: 200%; margin-left: -100%;
	    transition: margin 0.3s ease-in 0s;
	}
	.onoffswitch-inner:before, .onoffswitch-inner:after {
	    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
	    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
	    box-sizing: border-box;
	}
	.onoffswitch-inner:before {
	    content: "ON";
	    padding-left: 10px;
	    background-color: #34A7C1; color: #FFFFFF;
	}
	.onoffswitch-inner:after {
	    content: "OFF";
	    padding-right: 10px;
	    background-color: #EEEEEE; color: #999999;
	    text-align: right;
	}
	.onoffswitch-switch {
	    display: block; width: 18px; margin: 6px;
	    height: 18px;
	    background: #FFFFFF;
	    position: absolute; top: 0; bottom: 0;
	    right: 56px;
	    border: 2px solid #999999; border-radius: 20px;
	    transition: all 0.3s ease-in 0s; 
	}
	.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
	    margin-left: 0;
	}
	.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
	    right: 0px; 
	}
}